<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ITAdmin | 登录</title>

    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/css/animate.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link rel="shortcut icon" href="/static/img/logo.ico" />


</head>

<body class="gray-bg">

    <div class="loginColumns animated fadeInDown">
        <div class="row">

            <div class="col-md-6">
                <h2 class="font-bold">欢迎使用ITAdmin</h2>

                <p>
                    ITAdmin是使用Python, Django, GateOne开发的开源运维系统, 助力企业高效 用户、资产、权限、审计 管理
                </p>

                <p>
                    本程序是由<strong><font color="red">大官人</font></strong>编写，我对开源精神无比敬仰和崇拜

                </p>

                <p>
                    专注自动化运维，努力打造 易用、稳定、安全、自动化 的运维堡垒机, 这是我不懈的追求和动力
                </p>

                <p>
                    <small>永远年轻，永远热泪盈眶</small>
                </p>

            </div>
            <div class="col-md-6">
                <div class="ibox-content">
                    <div>
                        <img src="/static/img/logo.png" width="82" height="82">
                        <span class="font-bold text-center m-t-n-xs" style="font-size: 32px; font-family: inherit">登录</span>
                    </div>
                    <p class="red-fonts">{{ msg }}</p>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="请输入用户名或邮箱" required="" id="username">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" placeholder="请输入密码" required="" id="password">
                    </div>

                    <div class="form-group">
                        <img src="/captcha" id="code_img">&nbsp;&nbsp;
                        <input type="text" name='code' placeholder="请输入验证码" id="code"   style="width: 210px;height: 35px;border:1px solid #c8cccf;">
                    </div>
                    <div class="form-group">
                        <label class="m-t-n-xs">
                            <input type="checkbox" class="checkbox i-checks" id="remember">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;记住我
                        </label>
                        <button type="submit" class="btn dim btn-w-m btn-primary pull-right m-t-n-xs" id="login">登录</button>
                    </div>
                    <div class="modal-footer form-group">
                    <a href="{% url 'forgotpwd' %}">
                        <small>忘记密码?</small>
                    </a>

                </div>
            </div>
        </div>
        <hr/>
        <div class="row">
            <div class="col-md-6">
                BY 大官人 QQ 375739049
            </div>
            <div class="col-md-6 text-right">
               <small>© 2017 - 2018</small>
            </div>
        </div>
    </div>

</body>
<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="/static/js/plugins/iCheck/icheck.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
        });

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $('#id_code_1').attr("placeholder", "请输入验证码");

        $("#code_img").click(function () {
          now = new Date();
          $(this).attr('src',"{% url 'captcha' %}" + now.getTime());
        });

        $('#login').click(function () {
           var username = $('#username').val();
           var password = $('#password').val();
           var verification = $('#code').val();
           if ($('#remember').is(":checked")) {
               var remember = 1;
           } else {
               var remember = 0;
           }
           if (username == '') {
                swal("错误", "用户名不可为空", "error");
                return;
           }
           if (password == '') {
               swal("错误", "密码不可为空", "error");
               return;
           }
           if (verification == '') {
               swal("错误", "验证码不可为空", "error");
               return;
           }
           $.post('/', {username:username, password:password, code:verification, remember:remember}, function (data) {
               if (data.code) {
                   now = new Date();
                   $("#code_img").attr('src',"{% url 'captcha' %}" + now.getTime());
                   swal("错误", data.code, "error");

                   return;
               }
               if (data.username) {
                   now = new Date();
                   $("#code_img").attr('src',"{% url 'captcha' %}" + now.getTime());
                    swal("错误", data.username,"error");
                    return;
               }
               if (data.password) {
                   now = new Date();
                   $("#code_img").attr('src',"{% url 'captcha' %}" + now.getTime());
                    swal("错误", data.password,"error");
                    return;
               }
               if (data.status == 'ok') {
                   location.href = "{% url 'index' %}"
               }
           }, 'json')

        });
    });
</script>

</html>











